<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="../public/vue2.7.14-dev.js"></script>
</head>
<body>
    <!-- 
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

修饰符	说明
.stop	阻止单击事件继续传播
.prevent	阻止默认事件
.capture	添加事件侦听器时使用事件捕获模式
.once	事件只触发一次
.self	只有点击当前元素本身时才会触发回调
.native 让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

<my-component v-on:click.native="doSomething"></my-component>
注意：使用.native修饰符来操作普通HTML标签是会令事件失效的！！！

.passive
在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。
滚动事件的默认行为 (scrolling) 将立即发生而非等待 onScroll 完成，以防其中包含 event.preventDefault()

.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告


     -->

     <div id="app">
        <div @click="divHandler">
            <button @click.stop="btnHandler">点击</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent='linkclick'>百度一下</a>
        <br>

        <div @click.capture="divHandler"><!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
            <button @click="btnHandler">点击</button>
        </div>    
        <br>
        
        <button @click.once="btnHandler">点击</button>
        <br><br>

        <!-- 以上面的冒泡场景为例，点击按钮时，按钮和div的点击事件都会被触发。现在我们给div的点击事件绑定 .self 修饰器，（为了便于观察给div加上背景颜色）。
            可以看到点击按钮时只触发了按钮的点击事件，只有点击div元素时才会触发div的点击事件。-->
        <div @click.self="divHandler" style="background: red;">
            <button @click="btnHandler">点击</button>
        </div>
        
    </div>
     <script>
        var vm = new Vue({
            el:"#app",
            data: {

            },
            methods: {
                divHandler() {
                    console.log('触发了div')
                },
                btnHandler() {
                    console.log('触发了button')
                },
                linkclick(){
                    console.log('阻止默认行为')
                }
            }
        })
    </script>
</body>
</html>